<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="content">账号切换</block>
            <block slot="backText">返回</block>
        </cu-custom>

        <P v-for="(user, index) of usersList" :key="index">
            <view class="padding-xs radius shadow bg-white"
                flex-direction="row"
                style="margin-top: 10rpx;"
                v-on:click="clickChange(index)">
                <view class="cu-avatar xl round margin-left margin-right"
                    :style="'background-image:url(' + user.avatar + ');'"/>
                <text class="margin-right" style="font-size: 40rpx;font-weight: bold;">
                    {{user.username}}
                </text>
                <text v-show="curr_user.uuid == user.uuid"
                    class="lg text-green cuIcon-check justify-end text-center"
                    style="font-size: 60rpx;"></text>
            </view>
        </P>

        <view class="cu-modal" :class="showDialog?'show':''">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">切换用户</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    是否切换用户至
                    <text class="text-black text-bold">{{usersList[clickindex].username}}</text>
                    ?
                </view>
                <view class="cu-bar bg-white justify-end">
                    <view class="action">
                        <button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
                        <button class="cu-btn bg-green margin-left" @tap="change">确定</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {USER_API} from '@/API.js';
import {setCourseToStorage} from '@/storage.vue';
export default {
    data() {
        return {
            usersList: [],
            curr_user: {
                'uuid': '',
                'username': '',
                'avatar': ''
            },
            clickindex: -1,
            showDialog: false
        };
    },
    onLoad() {
        console.log('onload');
        uni.request({
            url: USER_API.users.url,
            method: USER_API.users.method,
            header: {'http-token': this.getToken()},
            success: function(res) {
                this.usersList = res.data;
            }.bind(this)
        });
        uni.request({
            url: USER_API.user.url,
            method: USER_API.user.method,
            header: {'http-token': this.getToken()},
            success: function(res) {
                this.curr_user.uuid = res.data.uuid;
                this.curr_user.username = res.data.username;
                this.curr_user.avatar = res.data.avatar;
            }.bind(this)
        });
    },
    methods: {
        setToken: function(res) {
            getApp().globalData.user = {
                'token': res.data.token,
                'uuid': res.data.uuid,
                'username': res.data.username,
                'avatar': res.data.avatar,
            };
        },
        clickChange(index) {
            if (this.usersList[index].uuid == this.curr_user.uuid) {
                uni.showToast({
                    title: '此为当前账号',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }
            this.clickindex = index;
            this.showDialog = true;
        },
        hideModal() {
            this.showDialog = false;
        },
        change() {
            this.showDialog = false;
            uni.request({
                url: USER_API.switchUser.url,
                method: USER_API.switchUser.method,
                header: {'http-token': this.getToken()},
                data: {'uuid': this.usersList[this.clickindex].uuid},
                success: function(res) {
                    console.log(res);
                    this.setToken(res);
                    uni.showToast({
                        title: '切换成功'
                    });
                    this.getCourseInfo();
                    setTimeout(function() {
                        uni.navigateBack({});
                    }, 1000);
                }.bind(this)
            });
        },
        getCourseInfo: async function() {
            await setCourseToStorage();
        }
    }
};
</script>

<style>
    .line_div_thin {
        width: 100%;
        height: 50rpx;
        background-color: #C8C7CC;
    }
</style>
